import { useEcharts } from "@/hooks/useEcharts";
import * as echarts from "echarts";

const PieChart = () => {
	let option: echarts.EChartsOption = {
		tooltip: {
			trigger: "item",
			formatter: "{a} <br/>{b} : {c} ({d}%)"
		},
		legend: {
			left: "center",
			top: "bottom",
			data: ["rose 1", "rose 2", "rose 3", "rose 4", "rose 5", "rose 6", "rose 7", "rose 8"],
			textStyle: {
				color: "#a1a1a1"
			}
		},
		toolbox: {
			show: true,
			feature: {
				mark: { show: true },
				dataView: { show: true, readOnly: false },
				restore: { show: true },
				saveAsImage: { show: true }
			}
		},
		series: [
			{
				name: "Radius Mode",
				type: "pie",
				radius: [60, 280],
				center: ["50%", "50%"],
				roseType: "radius",
				itemStyle: {
					borderRadius: 5
				},
				label: {
					show: true
				},
				emphasis: {
					label: {
						show: true
					}
				},
				data: [
					{ value: 40, name: "rose 1" },
					{ value: 33, name: "rose 2" },
					{ value: 28, name: "rose 3" },
					{ value: 22, name: "rose 4" },
					{ value: 20, name: "rose 5" },
					{ value: 15, name: "rose 6" },
					{ value: 12, name: "rose 7" },
					{ value: 10, name: "rose 8" }
				]
			}
		]
	};

	const [echartsRef] = useEcharts(option);
	return <div ref={echartsRef} className="card content-box"></div>;
};

export default PieChart;
